<template>
  <div class="input-number-range" :class="{ 'is-disabled': disabled }">
    <!-- {{ value }} -->
    <slot> </slot>

    <div class="flex">
      <!-- 1111 -->
      <div class="from f-f1">
        <el-input-number class="elInputNumberWidth myInputNumber" :controls="false"
          v-bind="{ class: $attrs.class, min: $attrs.min, max: $attrs.max, }" ref="input_from" v-model="userInputForm"
          :disabled="disabled" :placeholder="placeholder[0]" @blur="handleBlurFrom" @focus="handleFocusFrom"
          @input="handleInputFrom" @change="handleInputChangeFrom" :precision="precision">
          <template #suffix>
            <slot name="suffix"></slot>
          </template>
          <template #prefix>
            <slot name="prefix"></slot>
          </template>
        </el-input-number>
      </div>
      <div class="center f-pl5 f-pr5 f-fs14">
        <span>{{ rangeSeparator }}</span>
      </div>
      <div class="to  f-f1">
        <el-input-number class="elInputNumberWidth myInputNumber" :controls="false"
          v-bind="{ class: $attrs.class, min: $attrs.min, max: $attrs.max, }" ref="input_to" v-model="userInputTo"
          :disabled="disabled" :placeholder="placeholder[1]" @blur="handleBlurTo" @focus="handleFocusTo"
          @input="handleInputTo" @change="handleInputChangeTo" :precision="precision">
          <template #suffix>
            <slot name="suffix"></slot>
          </template>
          <template #prefix>
            <slot name="prefix"></slot>
          </template>
        </el-input-number>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'InputNumberRange',

  props: {
    value: {
      required: true,
      type: Array,
      default: function () {

        return [null, null]
      }

    },

    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: Array,
      default: ['最小值', '最大值']
    },
    // 分隔符
    rangeSeparator: {
      type: String,
      default: '~'
    },

    // 精度参数
    precision: {
      type: Number,
      default: 0,
      validator(val) {
        return val >= 0 && val === parseInt(val, 10)
      }
    }
  },

  data() {
    return {
      userInputForm: null,
      userInputTo: null
    }
  },

  watch: {
    value: {
      immediate: true,
      deep: true,
      handler(value) {
        // console.log(11111,value)
        if (value instanceof Array) {
          this.userInputForm = (typeof value[0] === 'number' || typeof value[0] === 'string') ? value[0] : null
          this.userInputTo = (typeof value[1] === 'number' || typeof value[1] === 'string') ? value[1] : null
        }
      }
    }
  },

  methods: {
    // 根据精度保留数字
    toPrecision(num, precision) {
      if (precision === undefined) precision = 0
      return parseFloat(
        Math.round(num * Math.pow(10, precision)) / Math.pow(10, precision)
      )
    },

    handleBlurFrom(event) {
      this.$emit('blurfrom', event)
    },

    handleFocusFrom(event) {
      this.$emit('focusfrom', event)
    },

    handleBlurTo(event) {
      this.$emit('blurto', event)
    },

    handleFocusTo(event) {
      this.$emit('focusto', event)
    },

    handleInputFrom(value) {
      this.$emit('inputfrom', value)
      // this.userInputFrom = value
    },

    handleInputTo(value) {
      this.$emit('inputto', value)
      // this.userInputTo = value
    },
    allValue() {
      // console.log(11111, this.userInputTo, this.userInputForm)
      if (this.userInputTo !== null && this.userInputForm !== null) {
        // console.log(11111,222222222222222)
        return true;
      }
    },
    noValue() {

      if (this.userInputTo === null && this.userInputForm === null) {
        // console.log(11111,222222222222222)
        return true;
      }
    },
    // from输入框change事件
    handleInputChangeFrom(value) {
      // 如果是非数字空返回null,有一个框为空进入
      if (isNaN(value) || value === '' || value === null) {

        if (this.allValue()) {
          this.$emit('input', [null, this.userInputTo])
          this.$emit('update:value', [null, this.userInputTo]); // 双向绑定数据改变,update必须结合v-model
          this.$emit('changefrom', this.userInputForm)
        }

        // 如果两个都为空,则删除数据源
        if (this.noValue()) {
          this.$emit('input', [])
          this.$emit('update:value', []); // 双向绑定数据改变,update必须结合v-model
          this.$emit('changeto', null)
        }
        return
      }

      // 初始化数字精度
      this.userInputForm = this.setPrecisionValue(value)

      // 如果from > to 将from值替换成to
      if (typeof this.userInputTo === 'number') {
        this.userInputForm =
          parseFloat(this.userInputForm) <= parseFloat(this.userInputTo)
            ? this.userInputForm
            : this.userInputTo
      }
      // console.log(11111,[this.userInputForm, this.userInputTo])
      if (this.allValue()) {
        this.$emit('input', [this.userInputForm, this.userInputTo])
        this.$emit('update:value', [this.userInputForm, this.userInputTo]); // 双向绑定数据改变,update必须结合v-model
        
        this.$emit('changefrom', this.userInputForm)
      }
    },

    // to输入框change事件
    handleInputChangeTo(value) {
      // 如果是非数字空返回null
      if (isNaN(value) || value === '' || value === null) {

        if (this.allValue()) {
          this.$emit('input', [this.userInputForm, null])
          this.$emit('update:value', [this.userInputForm, null]); // 双向绑定数据改变,update必须结合v-model
          this.$emit('changefrom', this.userInputTo)
        }

        // 如果两个都为空,则删除数据源
        if (this.noValue()) {
          this.$emit('input', [])
          this.$emit('update:value', []); // 双向绑定数据改变,update必须结合v-model
          this.$emit('changeto', null)
        }
        return
      }

      // 初始化数字精度
      this.userInputTo = this.setPrecisionValue(value)

      if (typeof this.userInputForm === 'number') {
        this.userInputTo =
          parseFloat(this.userInputTo) >= parseFloat(this.userInputForm)
            ? this.userInputTo
            : this.userInputForm
      }
      if (this.allValue()) {
        this.$emit('input', [this.userInputForm, this.userInputTo])
        this.$emit('update:value', [this.userInputForm, this.userInputTo]); // 双向绑定数据改变,update必须结合v-model
        
        this.$emit('changeto', this.userInputTo)
      }
    },

    // 设置成精度数字
    setPrecisionValue(value) {
      if (this.precision !== undefined) {
        const val = this.toPrecision(value, this.precision)
        return val
      }
      return null
    }
  }
}
</script>
<style lang="scss" scoped>
// 取消element原有的input框样式
::v-deep .el-input--mini .el-input__inner {
  border: 0px;
  margin: 0;
  padding: 0 15px;
  background-color: transparent;
}

.input-number-range {
  width: 100%;
  display: flex;
  // background-color: #fff;
  // border: 1px solid #dcdfe6;
  // border-radius: 4px;
}

.elInputNumberWidth {
  width: 100%;
}

.flex {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: center;
  align-items: center;

  .center {
    margin-top: 1px;
  }
}

//.is-disabled {
//background-color: #eef0f6;
//border-color: #e4e7ed;
//color: #c0c4cc;
// cursor: not-allowed;
//}</style>
